<template>
	<view class="carProduction">
		<view class="" style="height: 160rpx;">
		<view class="mail_List fixed z_ninetynine">
			<view class="mail" style="font-weight: 700;">
				<view class="order">添加车产</view>
			</view>
		</view>
		<view class="icon fixed z_ninetynine">
			<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
		</view>
			
		</view>
		<view class="second_card">
			<view class=""
				style="display: flex; justify-content: space-between; border-bottom: 1px solid #f6f7f9; padding: 20rpx 12rpx 20rpx 26rpx; margin: 0 26rpx;">
				<view class="">
					<text style="width: 170rpx; text-align: center; line-height: 70rpx;">●</text> <text
						style="margin-left: 20rpx;">用户姓名:</text>
				</view>
				<view style="width: 86rpx;text-align: center;line-height: 70rpx; font-weight: 700;"><text
						style="margin-right: 30rpx;">李</text><text>信</text></view>
			</view>
			<view class=""
				style="display: flex; justify-content: space-between; border-bottom: 1px solid #f6f7f9; padding: 20rpx 12rpx 20rpx 26rpx; margin: 0 26rpx;">
				<view class="">
					<text style="width: 170rpx;text-align: center;line-height: 70rpx;">●</text> <text
						style="margin-left: 20rpx;">车牌号:</text>
				</view>
				<view class="" style="width: 368rpx;">
					<u-input v-model="form.title" placeholder="请输入车牌号(格式:皖A88888)" />
				</view>
			</view>
			<view class=""
				style="display: flex; justify-content: space-between; border-bottom: 1px solid #f6f7f9; padding: 20rpx 12rpx 20rpx 26rpx; margin: 0 26rpx;">
				<view class="">
					<text style="width: 170rpx;text-align: center;line-height: 70rpx;">●</text> <text
						style="margin-left: 20rpx;">车辆品牌:</text>
				</view>
				<view class="" style="width: 194rpx;">
					<u-input v-model="form.address" placeholder="请输入车辆品牌" />
				</view>
			</view>
			<view class=""
				style="display: flex; justify-content: space-between; border-bottom: 1px solid #f6f7f9; padding: 20rpx 12rpx 20rpx 26rpx; margin: 0 26rpx;">
				<view class="">
					<text style="width: 170rpx;text-align: center;line-height: 70rpx;">●</text> <text
						style="margin-left: 20rpx;">车辆颜色:</text>
				</view>
				<view class="">
					<u-input v-model="form.describe" :type="newList==''? 'select' : 'text'" :disabled="true"
						:select-open="show" :placeholder="newList==''? '请选择': newList" @click="show = true" />
				</view>
			</view>
			<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// form表单
				form: {
					Reporter: '',
					title: '',
					address: '',
					describe: '',
					chargePerson: '',
					Executor: '',
					Maintenance: '',
					end: ''
				},
				show: false,
				list: [{
						value: '1',
						label: '白'
					},
					{
						value: '2',
						label: '黑'
					}
				],
				newList: '',
			}
		},
		methods: {
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				this.newList = e[0].label
				console.log(this.newList)
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.carProduction {
		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				padding: 10rpx 0;
				// margin-top: 96rpx;
				color: #999999;
				font-size: 40rpx;
				background-color: #e5e5e5;
			}

			.order {
				text-align: center;
			}
		}

		.icon {
			position: absolute;
			top: 18rpx;
			left: 20rpx;
		}

		/deep/.second_card {

			.uni-card {
				z-index: unset;
				margin: 24rpx 0;
			}

			/deep/.u-cell__value {
				margin-right: -18rpx;
			}

			.u-cell {
				padding: 14rpx 24rpx;
			}

			.uni-card__content {
				padding: 0 10rpx !important;
			}

			.u-input {
				text-align: right !important;
			}
		}
	}
</style>
